<template>
  <el-select
   :clearable="clearable"
   :disabled="disabled"
   :placeholder="placeholder"
   :multiple="multiple"
   collapse-tags
   v-model="value"
   @change="handleChange"
  >
    <el-option
      v-for="item in list"
      :key="item.roleId"
      :label="item.roleName"
      :value="item.roleId">
    </el-option>
  </el-select>
</template>

<script>
import { getRoleList } from '@/api/role'

export default {
  name: 'RoleSelect',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    selectValue: [String, Array], // 多选时为Array
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择角色'
    },
    multiple: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      value: '',
      list: []
    }
  },
  watch: {
    selectValue(n, o) {
      if (n != o) {
        this.value = this.selectValue
      }
    }
  },
  mounted() {
    getRoleList().then(res => {
      this.list = res.data
    })
  },
  methods: {
    handleChange(value) {
      this.$emit('handleChange', value)
    }
  },
  created() {
    this.value = this.selectValue
  }
}
</script>
